<template>
	<div>
		<v-header></v-header>
		<div class="pdlf">
			<div class="amount_money">
				<span class="left">消费金额：</span>
				<div class="right input_right">
					<input type="number" v-model="orderPrice" placeholder="请询问服务员输入" />
					 <span v-show="orderPrice" class="right">元</span>
				</div>
			</div>
			<div class="check_cg">
				<label><input type="checkbox" checked="">输入不参与活动金额（如酒水、套餐）</label>
			</div>
			<div class="amount_money">
				<span class="left join_no">不参与活动金额：<span>如酒水、套餐不参与</span></span>
				<div class="right input_right">
					<input type="number" v-model="priceActivity" placeholder="请询问服务员输入" />
					 <span v-show="priceActivity" class="right">元</span>
				</div>

			</div>
		</div>
		<div class="view_menu">
			<span class="left">查看菜单</span>
			<i class="iconfont icon-down right"></i>
		</div>
		<div class="card_cont mgt15 card_used_edit">
			<div class="card_edit">
				<span class="left">可以使用的电子券</span>
				<span @click="editMove" class="right">{{select?'完成':'编辑'}}</span>
			</div>
			<div :class="openState?'height_auto':'exchange_card_cont'">
				<div :class="slideLeft?'exchange_card exchange_card_left':'exchange_card'">
					<div class="cardBg1">
		                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
		                <div class="cardBg2">
		                    <div class="card_tit">
		                        <span class="left">订单号：14563357764343455</span>
		                        <span class="right">有效期至：2017.05.15</span>
		                        <div class="clear"></div>
		                    </div>
		                    <div class="card_img"><img src="../../images/commont_coupon.png"></div>
		                    <div class="card_info">
		                        <div class="card_name">多伦多自助餐厅58元抵用券（满188使用）</div>
		                        <div class="coupon_info_item">
		                            <p class="star_con">
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star1"></i>
		                            </p>
		                            <p class="info_pad">1236条 &nbsp;&nbsp;抵用券12张</p>
		                        </div>

		                        <div class="coupon_info_item color_gray">
		                            已售出   4000   &nbsp;&nbsp;&nbsp;已使用   3987
		                        </div>
		                        <!-- <a class="ewm_show"><img src="../../images/erweima_img_01.png"></a> -->
		                    </div>
		                </div>
						<a class="card_btn">
						  <span class="left">使用须知</span>
						  <em class="iconfont icon-right right"></em>
						</a>
		            </div>
		            <div :class="slideLeft?'card_menu card_menu_op':'card_menu'">
		            	<i class="iconfont icon-zengjia-"></i>
		            	<i class="iconfont icon-jianshao-"></i>
		            	<i class="iconfont icon-tubiao06"></i>
		            </div>
				</div>
				<div :class="slideLeft?'exchange_card exchange_card_left':'exchange_card'">
					<div class="cardBg1">
		                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
		                <div class="cardBg2">
		                    <div class="card_tit">
		                        <span class="left">订单号：14563357764343455</span>
		                        <span class="right">有效期至：2017.05.15</span>
		                        <div class="clear"></div>
		                    </div>
		                    <div class="card_img"><img src="../../images/commont_coupon.png"></div>
		                    <div class="card_info">
		                        <div class="card_name">多伦多海鲜自助餐厅晚市尊享超值代金券</div>
		                        <div class="coupon_info_item">
		                            <p class="star_con">
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star1"></i>
		                            </p>
		                            <p class="info_pad">1236条 &nbsp;&nbsp;代金券12张</p>
		                        </div>

		                        <div class="coupon_info_item color_gray">
		                            已售出   4000   &nbsp;&nbsp;&nbsp;已使用   3987
		                        </div>
		                        <a class="ewm_show"><img src="../../images/erweima_img_01.png"></a>
		                    </div>
		                </div>
						<a class="card_btn">
						  <span class="left">使用须知</span>
						  <em class="iconfont icon-right right"></em>
						</a>
		            </div>
		            <div :class="slideLeft?'card_menu card_menu_op':'card_menu'">
		            	<i class="iconfont icon-zengjia-"></i>
		            	<i class="iconfont icon-jianshao-"></i>
		            	<i class="iconfont icon-tubiao06"></i>
		            </div>
				</div>
				<div :class="slideLeft?'exchange_card exchange_card_left':'exchange_card'">
					<div class="cardBg1">
		                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
		                <div class="cardBg2">
		                    <div class="card_tit">
		                        <span class="left">订单号：14563357764343455</span>
		                        <span class="right">有效期至：2017.05.15</span>
		                        <div class="clear"></div>
		                    </div>
		                    <div class="card_img"><img src="../../images/commont_coupon.png"></div>
		                    <div class="card_info">
		                        <div class="card_name">多伦多海鲜自助餐厅折扣券</div>
		                        <div class="coupon_info_item">
		                            <p class="star_con">
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star1"></i>
		                            </p>
		                            <p class="info_pad">1236条 &nbsp;&nbsp;折扣券12张</p>
		                        </div>

		                        <div class="coupon_info_item color_gray">
		                            已售出   4000   &nbsp;&nbsp;&nbsp;已使用   3987
		                        </div>
		                        <a class="ewm_show"><img src="../../images/erweima_img_01.png"></a>
		                    </div>
		                </div>
						<a class="card_btn">
						  <span class="left">使用须知</span>
						  <em class="iconfont icon-right right"></em>
						</a>
		            </div>
		            <div :class="slideLeft?'card_menu card_menu_op':'card_menu'">
		            	<i class="iconfont icon-zengjia-"></i>
		            	<i class="iconfont icon-jianshao-"></i>
		            	<i class="iconfont icon-tubiao06"></i>
		            </div>
				</div>
				<div :class="slideLeft?'exchange_card exchange_card_left':'exchange_card'">
					<div class="cardBg1">
		                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
		                <div class="cardBg2">
		                    <div class="card_tit">
		                        <span class="left">订单号：14563357764343455</span>
		                        <span class="right">有效期至：2017.05.15</span>
		                        <div class="clear"></div>
		                    </div>
		                    <div class="card_img"><img src="../../images/commont_coupon.png"></div>
		                    <div class="card_info">
		                        <div class="card_name">多伦多海鲜自助餐厅折扣券</div>
		                        <div class="coupon_info_item">
		                            <p class="star_con">
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star"></i>
		                                <i class="icon iconfont icon-star1"></i>
		                            </p>
		                            <p class="info_pad">1236条 &nbsp;&nbsp;折扣券12张</p>
		                        </div>

		                        <div class="coupon_info_item color_gray">
		                            已售出   4000   &nbsp;&nbsp;&nbsp;已使用   3987
		                        </div>
		                        <a class="ewm_show"><img src="../../images/erweima_img_01.png"></a>
		                    </div>
		                </div>
						<a class="card_btn">
						  <span class="left">使用须知</span>
						  <em class="iconfont icon-right right"></em>
						</a>
		            </div>
		            <div :class="slideLeft?'card_menu card_menu_op':'card_menu'">
		            	<i class="iconfont icon-zengjia-"></i>
		            	<i class="iconfont icon-jianshao-"></i>
		            	<i class="iconfont icon-tubiao06"></i>
		            </div>
				</div>
			</div>

			<div @click="openLook" class="show_more">{{openState?'收起':'展开查看更多电子券'}}<i :class="openState?'iconfont icon-iconfontunfold':'iconfont icon-down'"></i></div>
		</div>
		<div class="card_cont">
			<div class="card_edit">
				<span class="left">为您推荐电子券</span>
			</div>
			<div class="exchange_card">
				<div class="exchange_recommend">
					<a>
		                <div class="coupon_img">
		                    <img src="../../images/couponImg.png">
		                    <div class="coupon_tag tag_bg_yellow">代金券</div>
		                </div>
		                <div class="coupon_info">
		                    <div class="coupon_info_tit"><b>多伦多自助餐厅58元抵用券（满188使用）</b></div>
		                    <span class="surplus">8张</span>
		                    <div class="coupon_info_item">
		                        <p class="info_r">
		                           天山1.2km
		                        </p>
		                        <p>有效期至：2017.6.07</p>
		                    </div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已售出0</p>
		                        <p class="star_con">
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star1"></i>
	                            </p>
		                        <p class="info_pad">1236条</p>
		                    </div>
		                    <div class="clear"></div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已使用0
		                        </p>
		                        <p class="left">自助餐</p>
		                        <p class="left info_pad">面值 <b class="red_color">￥10</b></p>
		                    </div>
		                </div>
		            </a>
		            <div class="clear"></div>
		            <div class="coupon_bot">
		                <a href="#/exchange/10000001/7" class="coupon_bot_btn">立即兑换</a>
		                <b class="coupon_money">125</b>
		                <span>芸券</span>
		                <img src="../../images/avatar.png">
		                <span>小芸</span>
		            </div>
				</div>
			</div>
			<div class="exchange_card">
				<div class="exchange_recommend">
					<a>
		                <div class="coupon_img">
		                    <img src="../../images/couponImg.png">
		                    <div class="coupon_tag tag_bg_green">折扣券</div>
		                </div>
		                <div class="coupon_info">
		                    <div class="coupon_info_tit"><b>多伦多自助餐厅58元抵用券（满188使用）</b></div>
		                    <span class="surplus">8张</span>
		                    <div class="coupon_info_item">
		                        <p class="info_r">
		                           天山1.2km
		                        </p>
		                        <p>有效期至：2017.6.07</p>
		                    </div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已售出0</p>
		                        <p class="star_con">
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star1"></i>
	                            </p>
		                        <p class="info_pad">1236条</p>
		                    </div>
		                    <div class="clear"></div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已使用0
		                        </p>
		                        <p class="left">自助餐</p>
		                        <p class="left info_pad">面值 <b class="red_color">￥10</b></p>
		                    </div>
		                </div>
		            </a>
		            <div class="clear"></div>
		            <div class="coupon_bot">
		                <a href="#/exchange/10000001/7" class="coupon_bot_btn">立即兑换</a>
		                <b class="coupon_money">125</b>
		                <span>芸券</span>
		                <img src="../../images/avatar.png">
		                <span>小芸</span>
		            </div>
				</div>
			</div>
			<div class="exchange_card">
				<div class="exchange_recommend">
					<a>
		                <div class="coupon_img">
		                    <img src="../../images/couponImg.png">
		                    <div class="coupon_tag tag_bg_blue">抵用券</div>
		                </div>
		                <div class="coupon_info">
		                    <div class="coupon_info_tit"><b>多伦多自助餐厅58元抵用券（满188使用）</b></div>
		                    <span class="surplus">8张</span>
		                    <div class="coupon_info_item">
		                        <p class="info_r">
		                           天山1.2km
		                        </p>
		                        <p>有效期至：2017.6.07</p>
		                    </div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已售出0</p>
		                        <p class="star_con">
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star"></i>
	                                <i class="icon iconfont icon-star1"></i>
	                            </p>
		                        <p class="info_pad">1236条</p>
		                    </div>
		                    <div class="clear"></div>
		                    <div class="coupon_info_item">
		                        <p class="info_r">已使用0
		                        </p>
		                        <p class="left">自助餐</p>
		                        <p class="left info_pad">面值 <b class="red_color">￥10</b></p>
		                    </div>
		                </div>
		            </a>
		            <div class="clear"></div>
		            <div class="coupon_bot">
		                <a href="#/exchange/10000001/1" class="coupon_bot_btn">立即兑换</a>
		                <b class="coupon_money">125</b>
		                <span>芸券</span>
		                <img src="../../images/avatar.png">
		                <span>小芸</span>
		            </div>
				</div>
			</div>
		</div>
		<div class="whiteBg pdlf">
			<div class="sum_title">
				<span class="left">实付总金额</span>
				<a class="right color-seec4">查看详单</a>
			</div>
			<div class="card_used">
				<div class="left">
					<span>0元</span>
					<p>莲池印度餐厅58元抵用券</p>
					<p>莲池印度餐厅48元代金券</p>
				</div>
				<div class="right">
					<div class="card_used_item">
						<img src="../../images/card_bg_04.png">
						<span>x<i>0</i></span>
					</div>
					<div class="card_used_item card_complex card_bg_yellow">
						<img src="../../images/commont_coupon.png">
						<span>x<i>2</i></span>
					</div>
					<div class="card_used_item">
						<img src="../../images/commont_coupon.png">
						<span>x<i>1</i></span>
					</div>
				</div>
			</div>
		</div>
		<button class="next_btn">确定买单</button>
	</div>
</template>
<script>
	import header from '../../componentes/global/header.vue'
	import star from '../../componentes/global/star.vue'
	import * as types from '../../vuex/types.js'
	import { mapState } from 'vuex'
	export default{
		components: {
			'v-header':header,
			star
		},
		data(){
			return {
				orderPrice:null,
				priceActivity:null,
				openState:false,
				slideLeft:false,
				select:false
			}
		},
		methods:{
			// 编辑电子券
			editMove:function(){
				if (this.select==false) {
                    this.select=true;
                    this.slideLeft=true;

                }else if(this.select==true){
                	this.select=false;
                    this.slideLeft=false;

                }
			},
			// 展开查看更多电子券
			openLook:function(){
				if (this.openState==false) {
					this.openState=true;
				}else{
					this.openState=false;
				}
			}
		},
		beforeRouteLeave(to, from, next){
            next()
        },
        created:function(){
        },
        mounted:function(){
        	this.$nextTick(function(){
        		this.$store.commit(types.HEAD_TEXT,"多伦多海鲜自助餐厅");
                this.$store.commit(types.HEAD_BACK_ICON,true);
                this.$store.commit(types.HEAD_MES_ICON,false);
        	})
        }
	}
</script>
<style>


</style>
